<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box,.boxa{
            height:500px;
            width:1000px;
            border:5px solid red;
        }
        .leftbox{
            height:200px;
            width:200px;
            background-color: orangered;
            /* 浮动：float  
            left ：左浮动
            right ：右浮动
            none ：不浮动 默认

            1.脱离文档流（不占位置）
            2.多个浮动的元素都会脱离文档流，浮动元素与浮动元素相互影响
            3.只能在父级盒子内浮动
            4.浮动不能被继承 
            5.不浮动的块元素，宽度可以继承父级的宽度，宽度不能再继承父级的，而是由自身内容大小决定。
            6.行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用。
            7.多个块级元素排列在一行内，必须都浮动
            */
            float:right;
        }
        .rightbox{
            height:300px;
            width:200px;
            background-color: aquamarine;
            float:right;
        }
        .boxaa{
            display: inline-block;
            height:300px;
            width:200px;
            background-color: blue;
        }
        .boxbb{
            display: inline-block;
            height:300px;
            width:200px;
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="box">
        <h1 class="leftbox">111</h1>
        <span class="rightbox">222</span>
    </div>

    <div class="boxa">
        <h1 class="boxaa"></h1>
        <span class="boxbb"></span>
    </div>
</body>
</html>